<template>
    <div class="template">
        <div class="nav" style="background-color: #292C31;">
            <img :src="black" style="width: 51px;" @click="router.back()"/>
            QR code
            <img :src="dowenLoad" style="width: 51px;" @click="save"/>
        </div>
        <div class="getPic">
            <div class="getQR" ref="getPic" style="width: 100%;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;">
                <img :src="picBase[picId]"  v-if="picId != -1" style="width: 100%;height: 100%;position: absolute;z-index: 0;"/>
                <div id="qrcode" ref="qrcode" ></div>
            </div>
        </div>
        <div class="make">
            <div class="check">
                <div :class="checkId == 0?'checkItem checkIt' : 'checkItem' " @click="checkId = 0">Text</div>
                <div :class="checkId == 1?'checkItem checkIt' : 'checkItem' " @click="checkId = 1">Box</div>
            </div>
            <div v-if="checkId == 0" style="height: 34vh;overflow: hidden;">
                <div class="inputText">
                    <van-field type="textarea" v-model="QRTextDemo" placeholder="Input content" style="background-color: #F4F4F4;height: 100%;"/>
                </div>
                <div class="next" @click="makeQR">Generation</div>
            </div>
            <div v-if="checkId == 1" style="height: 34vh;" class="picList">
                <div v-for="(item, index) in picBase" :key="index" class="picItem" @click="picId = picId == index ? -1 : index">
                    <img :src="item" style="width: 80%;flex-shrink: 0;" />
                    <img :src="coins" style="position: absolute;top: 50%;left: 50%;width: 35px;transform: translate(-50%, -50%);" v-if="index > 1"/>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup>
import html2canvas from "html2canvas";
import QRCode from 'qrcodejs2-fix'
import black from '../assets/black.png'
import coins from '../assets/coins@2x.png'
import { showToast,showLoadingToast, closeToast, showConfirmDialog } from "vant";
import dowenLoad from '../assets/dowenLoad.png'
import { picBase } from '../picBase'
import { useRouter } from 'vue-router';
import { nextTick, onMounted, ref } from 'vue';
const router = useRouter()
const QRText = ref('This is QR code')
const QRTextDemo = ref('')
const qrcode = ref('')
const checkId = ref(0)
const picId = ref(-1)
const coinsNum = ref(0)
onMounted(() => {
    nextTick(() => {
        getQR()
    })
    coinsNum.value = localStorage.getItem('MakeQRCoinsNum') ? Number(localStorage.getItem('MakeQRCoinsNum')) : 0
})
const getQR = () => {
    qrcode.value.innerHTML = '';
    new QRCode(qrcode.value, {
        text: QRText.value,
        colorDark: '#000000', //二维码前景色
        colorLight: 'transparent', //二维码背景色
        correctLevel: QRCode.CorrectLevel.H,
      })
}
const makeQR = () => {
    if (!QRTextDemo.value) {
        showToast("Please enter text")
        return
    }
    QRText.value = QRTextDemo.value
    QRTextDemo.value = ''
    getQR()
}
const getPic = ref()
const save = () => {
    if (QRText.value == 'This is QR code') {
        showToast('Please enter the QR code content')
        return
    }
    let type = picId.value > 1
    let message = type ? 'You have used paid materials, and 10 diamond will be deducted when saving the picture.' : 'Are you sure you want to save to photo album?'
    showConfirmDialog({
      message,
      confirmButtonText: 'Confirm',
      cancelButtonText: 'Cancel'
    }).then(() => {
        dwenLoadQR(type)
    })
}
const dwenLoadQR = (type) => {
    if (type && coinsNum.value<10) {
        showToast('Not enough coins')
        return        
    }
    html2canvas(getPic.value).then((canvas) => {
        let imgData = canvas.toDataURL("image/jpeg"); // 转base64
        window['reducedCoins'] = (data) => {
	            if (data === "1") {
	            } else {
                    if (type) {
                        coinsNum.value = coinsNum.value - 10
                        localStorage.setItem('MakeQRCoinsNum', coinsNum.value)
                    }
                    reSize()
                    let QRhistory = localStorage.getItem('QRhistory') ? JSON.parse(localStorage.getItem('QRhistory')) : []
                    let data = []
                    if(QRhistory.filter(res => res.time = getTime()).length > 0) {
                        data = QRhistory.map(res => {
                            if (res.time == getTime()) {
                                res.QR.unshift(imgData)
                            }
                            return res
                        })
                    }else {
                        data = [{time: getTime(), QR: [imgData]}, ...QRhistory]
                    }
                    try {
                        localStorage.setItem('QRhistory', JSON.stringify(data))
                    } catch (error) {
                        showToast('Not enough memory to add to history')
                    }
	            }
	        }
	        window['album'](0, imgData);
    }); 
}
const getTime = () => {
  var date =  new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
  let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
  return `${year}.${month}.${day}`
}
const reSize = () => {
    QRText.value = 'This is QR code'
    QRTextDemo.value = ''
    checkId.value = 0
    picId.value = -1
    getQR()
}
</script>
<style scoped>
.getPic {
    flex-shrink: 0;
    width: 33vh;
    height: 33vh;
    padding: 7px;
    box-sizing: border-box;
    background: #F4F4F4;
    border-radius: 0px 0px 0px 0px;
    margin-top: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.check {
    margin: 0 auto;
    flex-shrink: 0;
    width: 335px;
    height: 59px;
    background: #80C978;
    border-radius: 63px 63px 63px 63px;
    padding: 9px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.inputText {
    flex-shrink: 0;
    width: 336px;
    height: 20vh;
    background: #F4F4F4;
    border-radius: 12px 12px 12px 12px;
    margin: 2vh 0;
    overflow: hidden;
}
.next {
    flex-shrink: 0;
    width: 336px;
    height: 60px;
    background: #80C978;
    border-radius: 66px 66px 66px 66px;
    text-align: center;
    line-height: 60px;
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
}
.make {
    position: fixed;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
}
#qrcode{
    display: flex;
    justify-content: center;
    align-items: center;
}
::v-deep(#qrcode img) {
    width: 75% !important;
}
::v-deep(.van-field__control) {
    height: 19vh;
}
.checkItem {
    width: 152px;
    height: 100%;
    border-radius: 66px 66px 66px 66px;
    font-weight: 400;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.53);
    color: #FFFFFF;
}
.checkIt {
    background: #FFFFFF;
    color: #292C31;
}
.picList {
    width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    height: 100%;
}
.picItem {
    flex-shrink: 0;
    width: 25vw;
    height: 25vw;
    background: #D9D9D9;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #000000;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
</style>